:root {
  --primary-color: #31c27c;
}
/* ：root 是伪类选择器，表示文档的根元素，定义了全局变量 --primary-color */
body {
  margin: 0;
  background: #f5f5f5;
  font-family: Microsoft Yahei;
  font-size: 14px;
  /* min-width: 1000px; */
}
a {
  text-decoration: none;
  color: #000;
}
header {
  height: 90px;
  background: white;
  display: flex;
  /* 使用flex布局，将QQ音乐图标在header盒子里垂直居中，自动弹性伸缩，适配不同大小的屏幕和移动端 */
  align-items: center;
}
.header-inner,
main {
  /* width: 1200px; */
  padding: 20px;
  margin: auto;
  /* 让 .header-inner水平居中*/
}
.tag-list {
  margin-top: 50px;
  margin-bottom: 15px;
}
.tag-item {
  display: inline-block;
  /* 将含tag-item类的链接变为行内块元素，方便放到一排 */
  padding: 0 8px;
  margin-right: 24px;
  line-height: 26px;
  color: #000;
  text-decoration: none;
}
.tag-active {
  background: var(--primary-color);
  /* 在:root 里定义的变量可用var()引用 */
  color: white;
}
.tag-item:not(.tag-active):hover {
  color: var(--primary-color);
}
/* 除了含tag-active类的tag-item类都要在鼠标移动到的时候字体变绿色 */
.nowrap {
  white-space: nowrap;
  /* 只保留一个空白，文本不会换行，会在同一行继续，直到遇到br标签为止 */
  overflow: hidden;
  /* 隐藏溢出内容且不出现滚动条 */
  text-overflow: ellipsis;
  /* 用省略号来代替显示溢出的文本 */
}
.playlist {
  display: grid;
  /*使用grid布局  */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 容器大小不确定，将容器分成每列宽度200px到1fr的块来自动填充 */
  gap: 45px 15px;
  /* 分成的部分上下间距为45px,左右间距为15px */
  margin-bottom: 45px;
}
.cover-wrap {
  display: flex;
  /* 使用flex布局，方便进行图片链接的居中 */
  position: relative;
  /* position使用relative方便后面两张absolute图片元素的覆盖 */
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  cursor: pointer;
  /* 鼠标放在图片链接上时光标变为一只手 */
}
.cover-img {
  width: 100%;
  transition: all 0.75s;
  /* 图片宽度高度的过渡时间都为0.75s
  可与后面的transform联用使图片进行固定点为中心的变换
  */
}
.cover-mask {
  position: absolute;
  /* 相对于relative父级元素进行位置调整 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  /* 灰色帐罩完全透明 */
  transition: all 0.5s;
  /* 灰色帐罩长度宽度的过度时间都为0.5s */
}
.cover-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
  /* 将play图片在图片链接里居中 */
  opacity: 0;
  transform: scale(0.7);
  /* 在鼠标移开不在时，play图片沿x轴，y轴缩小为原来的0.7倍 */
  transition: all 0.5s;
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;
}
/* 光标在图片链接上时，灰色帐罩的透明度变为0.2 */
.cover-wrap:hover .cover-play {
  opacity: 1;
  /* 光标在图片链接上时，play图片完全不透明 */
  transform: scale(1);
  /* 光标在图片链接上时，play图片大小沿着x轴,y轴由原来的0.7放大到1倍 */
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);
}
/* 光标在图片链接上时，人物图片大小沿着x轴,y轴由原来的1放大到1.07倍 */
.album-title:hover {
  color: var(--primary-color);
}
.album-author {
  color: #999;
  line-height: 1.6;
}
.album-author:hover {
  color: var(--primary-color);
}
.album-time {
  color: #999;
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 使用flex布局，方便页码条水平，垂直居中 */
.page-item {
  display: inline-block;
  /* 变为行内块元素，使页码链接可以处于一行 */
  color: #a2a2a2;
  line-height: 50px;
  padding: 0 20px;
  margin: 10px;
  font-size: 16px;
}
.page-current,
.page-item:not(.page-more):hover {
  background: var(--primary-color);
  color: white;
}
/* 鼠标悬浮时，页码链接背景变为绿色 */
footer {
  margin-top: 60px;
  background: #333;
  height: 200px;
}
